<!--<!do 	ctype html>-->
<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="../css/mui.min.css" rel="stylesheet" />
		<style type="text/css">
			html,
			body {
				background-color: #FFFFFF
			}
			
			.mui-content{
				background-color: #FFFFFF
			}
			.mui-bar {
				background-color: #3B559F;
				width: 100%;
				color: #FFFFFF;
				display: flex;
				align-items: center;
			}
			
			.mui-bar a,.mui-bar h1 {
				color: #FFFFFF;
			}

			.mui-bar button {
				color: #FFFFFF;
				background-color: #3B559F;
				position: absolute;
				right: 6px;
				bottom: 5px;
				border: 0;
			}
			
			.mui-bar button:active {
				color: #FFFFFF;
				background-color: #3B559F!important; 
			}
			
			.title-div {
				margin-top: 5%;
				text-align: center;
				padding: 0;
			}
			
			.title-div span {
				color: #ABABAB;
				font-size: 90%;
			}
			
			.areaa-div {
				margin-top: 30px;
				width: 90%;
				margin-left: 5%;
				border-bottom: 1px solid #E5E5E5;
			}
			
			.areaa-sapn1 {
				font-size: 90%;
				float: right;
				margin-right: 9%;
			}
			
			.areaa-span2 {
				color: #007AFF;
			}
			
			.input-div {
				width: 90%;
				margin-left: 5%;
				border-bottom: 1px solid #E5E5E5
 			}
			
			#input1 , #input2 {
				width: 100%;
				border: hidden;
				margin-bottom: 0;
				padding: 3px 0!important;
				font-size: 90%;
			}
			
			.mui-btn {
				width: 90%;
				margin-left: 5%;
				margin-top: 20px;
			}
		</style>

	</head>

	<body>
		<header class="mui-bar mui-bar-nav" id="header">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
			<h1 class="mui-title">注册</h1>
			<button type="button" id="jump">下一步</button>
		</header>

		<div class="mui-content">
			<div class="title-div">
				<h4>请输入手机号</h4>
				<span>登录和重设密码时，需要用到手机号码</span>
			</div>
			<div class="areaa-div" id="areaa-div">
				国家和地区
				<span class="areaa-sapn1">中国（<span class="areaa-span2">+86</span>）</span>
			</div>

			<div class="input-div"><input type="number" id="input1" placeholder="手机号码" /></div>

			<div class="input-div"><input type="number" id="input2" placeholder="请输入短信验证码" /></div>

			<button type="button" class="mui-btn mui-btn-blue login-btn">获取手机验证码</button>

		</div>

		<script src="../js/mui.min.js"></script>
		<script src="../js/app.js"></script>
		<script src="../js/immersed.js"></script>
		<script type="text/javascript" charset="utf-8">
			mui.init();

			mui.plusReady(function() {
				starbar();
				
				var viewwidth = document.body.clientWidth;
				var pngg = document.getElementsByClassName('input-div');
				pngg[0].style.padding = "-webkit-calc(" + viewwidth * 0.03 + "px) 0";
				pngg[1].style.padding = "-webkit-calc(" + viewwidth * 0.03 + "px) 0";
				document.getElementById('areaa-div').style.cssText = "padding-bottom: -webkit-calc(" + viewwidth * 0.03 + "px)";
				
				
				document.getElementById('jump').addEventListener('tap', function() {
					var val1 = document.getElementById('input1').value;
					var val2 = document.getElementById('input2').value;
					if(val1 == 0) {
						mui.toast('请输入手机号码！');
						return false;
					}
					if(val1.length != 11) {
						mui.toast('请输入有效的手机号！');
						return false;
					}
					var PATTERN_CHINAMOBILE = /^1(3[4-9]|5[012789]|8[23478]|4[7]|7[8])\d{8}$/; //移动号
					var PATTERN_CHINAUNICOM = /^1(3[0-2]|5[56]|8[56]|4[5]|7[6])\d{8}$/; //联通号
					var PATTERN_CHINATELECOM = /^1(3[3])|(8[019])\d{8}$/; //电信号
					if(PATTERN_CHINAUNICOM.test(val1) && val1.length == 11) {
						mui.toast("欢迎您联通用户");
						jumpview();
						return true;
					} else if(PATTERN_CHINAMOBILE.test(val1) && val1.length == 11) {
						mui.toast("欢迎您移动用户");
						jumpview();
						return false;
					} else if(PATTERN_CHINATELECOM.test(val1) && val1.length == 11) {
						mui.toast("欢迎您电信用户");
						jumpview();
						return true;
					} else {
						mui.toast("请输入正确的手机号");
						return false;
					}
				})

				var jumpview = function() {
					var val1 = document.getElementById('input1').value;
					
					// 获取每台手机的唯一cid
					var cid = plus.push.getClientInfo().clientid;
					
					
					mui.ajax({
						url: app.serverUrl + '/userController/registTel',
						data: {
							lyuser_Tel: val1,
							lyuser_Cid:cid
						},
						async: true, //将false改为true
						crossDomain: true, //强制使用5+跨域
						dataType: 'json', //服务器返回json格式数据
						type: 'get', //HTTP请求类型
						timeout: 10000, //超时时间设置为10秒；
						//processData: false,
						headers: {
							'Content-Type': 'application/x-www-form-urlencoded'
						},
						success: function(data) {
							if(data.state == 1) {
								mui.alert("该手机号已注册");
							} else if(data.state == 2) {
								mui.alert("网络异常，请重试");
							} else {
								mui.openWindow({
									url: "register2.html",
									id: "register2.html",
									extras: {
										shoujihao: val1
									}
								})
							}

						},
						error: function(xhr, type, errorThrown) {
							//异常处理；
							alert("访问异常")
						}
					});
				}
			})
		</script>
	</body>

</html>